<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>chat</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
        }

        #xiaoxi {
            width: 100%;
            height: 250px;
            overflow: auto;
            border: 1px solid gray;
            word-break: break-all;
            resize: none;
            padding: 10px;
        }

        /*滚动条样式*/
        #xiaoxi::-webkit-scrollbar {
            width: 4px;
            /*height: 4px;*/
        }

        #xiaoxi::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        #xiaoxi::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }

        #xiaoxi_row_left {
            text-align: left;
        }

        #xiaoxi_row_right {
            text-align: right;
        }
    </style>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="panel panel-success" id="myChat">
                <div class="panel-heading">
                    <h3 class="panel-title">在线聊天</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="username" placeholder="请输入你的网名"
                               style="width: 100%; height: 25 ;overflow: auto;word-break: break-all; resize: none;"/>
                        <button type="button" class="btn btn-default" id="sureUserName" onclick="sureUserName()">确定网名
                        </button>
                        <button type="button" class="btn btn-default" id="cleanUserName" onclick="cleanUserName()">
                            重置网名
                        </button>
                    </div>

                    <div class="form-group">
                        <div id="xiaoxi">

                        </div>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control" id="content"
                                  style="width: 100%; height: 50px ;overflow: auto;word-break: break-all; resize: none;"></textarea>
                        <button type="button" class="btn btn-default" onclick="sendContent()">发送消息</button>
                        <button type="button" class="btn btn-default" onclick="clearContent()">清空消息</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="atmosphere.js"></script>
<script src="websocket.js"></script>

<script>
    $(function () {
        var username = getStorage("username");
        if (username != null && username != "") {
            $("#username").val(username);
            $("#username").prop('disabled', true);
            $("#sureUserName").prop('disabled', true);
        } else {
            $("#cleanUserName").prop('disabled', true);
        }
        initWebSocket("/websocket/chat", {
            "username": username
        }, appendMsg);
    })

    function sureUserName() {
        var username = $("#username").val();
        if (username == null || username == "") {
            myAlert("warning", "警告：", "网名不能为空！");
        } else {
            setStorage("username", username);
            window.location.reload();
        }
    }

    function cleanUserName() {
        removeStorage("username")
        window.location.reload();
    }

    function sendContent() {
        var username = getStorage("username");
        if (username == null || username == "") {
            myAlert("danger", "错误：", "未设置用户名不能发送消息！");
            return;
        }
        var content = $("#content").val();
        if (content == null || content == "") {
            myAlert("danger", "错误：", "消息内容不能为空！");
            return;
        }
        // appendMsg(false, username, content);

        var msg = {
            "name": username,
            "message": content
        }

        $.post("sendMsg/", msg, function () {
        });

        $("#content").val("");
    }

    function clearContent() {
        if ($("#content").val() != null && $("#content").val() != '') {
            $("#content").val("");
            myAlert("success", "成功：", "删除消息成功！");
        }
    }

    // 储存数据
    function setStorage(key, value) {
        window.sessionStorage.setItem(key, value);
    }

    // 删除数据
    function removeStorage(key) {
        window.sessionStorage.removeItem(key);
    }

    // 获取数据
    function getStorage(key) {
        return window.sessionStorage.getItem(key);
    }

    function myAlert(status, strong, content) {
        // info danger warning success
        $("#myChat").prepend("<div class='alert alert-" + status +
            " alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><strong>" +
            strong + "</strong>" + content + "</div>");
    }

    function appendMsg(flag, name, content) {
        var username = getStorage("username");
        if (username == name) {
            flag = false;
        }
        if (flag) {
            $("#xiaoxi").append("<div id='xiaoxi_row_left'><div class='well well-sm'><strong>" + name + "：</strong>" + content +
                "</div></div>");
        } else {
            $("#xiaoxi").append("<div id='xiaoxi_row_right'><div class='well well-sm'>" + content + "<strong>：" + name +
                "</strong></div></div>");
        }
        $("#xiaoxi").scrollTop($("#xiaoxi").height());
    }
</script>
</body>
</html>
